<template>
      <div class="home-header">
        <div class="header-left">
            <span class="iconfont">&#xe600;</span>
        </div>
        <div class="header-center">
           <span class="iconfont">&#xe624;</span>
           <input type="text" placeholder="输入城市景点/游玩主题"/>
        </div>
        <router-link to="/city">
          <div class="header-right">
            {{this.$store.state.city}}
            <span class="iconfont">&#xe607;</span>
          </div>
        </router-link>
      </div>
</template>

<script>
    export default {
        name: "Header",
        props: {
            city: {
                type: String
            }
        }
    }
</script>

<style lang="stylus" scoped>
     .home-header
        width: 100%
        height: .45rem
        background: #25a4bb
        display: flex
        align-items: center
        color #ffffff
        font-size .14rem
        .header-left
           margin: 0rem .06rem
        .header-center
           flex: 1
           background : #ffffff
           height: .3rem
           line-height: .26rem
           color: #cacaca
           span{
             display: inline-block
             vertical-align middle
             margin-left 5px
           }
        .header-right
            color: #ffffff
            margin: 0rem .06rem

</style>
